<template>
  <div class="search">
   <div class="nav-header">
     <ul>
       <li><a href="">关注</a></li>
       <li><a href="">热门</a></li>
       <li><a href="">最新</a></li>
     </ul>
   </div>
   <div class="main-nav">
     <ul>
       <li
       v-for="detail in details"
       :key="detail.id">
       <img :src="detail.bgImage" alt="">
       </li>
     </ul>
   </div>
   <div class="main-wrap">
   <div class="main"
   v-for="prod in lists"
   :key="prod.prdName"
   >
     <img :src="prod.mediumThumbnails" alt="">
     <span>{{prod.prdName}}</span>
     <span>{{prod.salPrice}}</span>
     <span>{{prod.saleCount}}</span>
   </div>
   </div>
  </div>
</template>

<script>
import { getSearch, getList } from '@/api/search'
export default {
  name: 'Search',
  data () {
    return {
      details: [],
      lists: []
    }
  },
  created () {
    getSearch().then(res => {
      console.log(res)
      this.details = res
    })
    getList().then(res => {
      console.log(res)
      this.lists = res
    })
  }
}
</script>

<style lang="scss" scoped>
 .nav-header{
   width: 100%;
   height: 64px;
   overflow: hidden;
   ul{
     display: flex;
     width: 260px;
     margin-left: 50px;
     margin-top: 20px;
     li{
       text-align: center;
       margin-left: 60px;
       a{
         text-decoration: none;
          font-size: 13px;
         color: #898587;
        :hover{
         color:#024137 ;
       }
       }
     }
   }
 }
 .main-nav{
   width: 100%;
   ul{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     li{
      width: 48%;
      margin: 6px 0;
       img{
        width: 100%;
        height: 100%;
       }
     }
   }
 }
 .main-wrap{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 .main{
   width: 170px;
   height: 295px;
   border: 1px solid #b6b6b6;
   display: block;
   display: flex;
   flex-direction: column;
   margin-top: 10px;
   img{
     width: 158px;
     height: 158px;
   }
   span{
    color: #3e4147;
    font-size: 13px;
    text-align: center;
    margin-top: 3vw;
    padding-left: 3vw;
    padding-right: 3vw;
   }
 }
 }
</style>
